<template>
<view>
    <view class="skill-item">
        <text>职业技能：</text>
        <input type="text" placeholder="请输入您的职业技能名称" @input="skillInput"></input>
    </view>
    <view class="skill-item">
        <text>领证时间：</text>
        <picker mode="date" :value="nowDate" start="1991-01-01" :end="date" @change="bindDateChange">
            <view class="picker">{{nowDate}}</view>
        </picker>
    </view>
    <view class="skill-foot">
        <button type="primary" plain @tap="saveAnd">保存继续添加</button>
        <button type="primary" @tap="save">确认保存</button>
    </view>
</view>
</template>

<script>
// pages/ucenter/skill/skill.js
let app = getApp();

export default {
  data() {
    return {
      date: '2020-08-17',
      nowDate: '2020-08-17',
      form: {
        userId: "",
        openId: "",
        skillName: "",
        time: "2020-08-17",
        imageUrl: ""
      }
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.onGetUserInfo();
    this.getNowDate();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    skillInput(e) {
      let form = this.form;
      form.skillName = e.detail.value;
      this.setData({
        form
      });
    },

    saveAnd(e) {
      this.saveSkill();
      uni.navigateTo({
        url: '/pages/ucenter/skill/skill'
      });
    },

    save(e) {
      this.saveSkill();
      uni.navigateTo({
        url: '/pages/ucenter/recruit/recruit'
      });
    },

    bindDateChange(e) {
      let form = this.form;
      form.time = e.detail.value;
      this.setData({
        nowDate: e.detail.value,
        form
      });
    },

    getNowDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();

      if (month < 10) {
        month = "0" + month;
      }

      if (day < 10) {
        day = "0" + day;
      }

      var nowDate = year + '-' + month + '-' + day;
      this.setData({
        date: nowDate
      });
    },

    saveSkill() {
      uni.showLoading({
        title: '保存中'
      });
      let form = this.form;
      uni.request({
        url: `${app.globalData.baseUrl}/mallappletbackstage/skills-certificate`,
        complete: res => {
          uni.hideLoading();
        },
        data: form,
        fail: res => {
          uni.showToast({
            title: '保存失败',
            icon: "none"
          });
        },
        method: "POST",
        success: result => {
          console.log(result);
        }
      });
    },

    onGetUserInfo() {
      let openid = uni.getStorageSync('openid');

      let _this = this;

      if (!openid) {
        uni.navigateBack({
          complete: res => {
            uni.showToast({
              title: '请登录',
              icon: "none"
            });
          }
        });
      } else {
        uni.request({
          url: `${app.globalData.baseUrl}/user/selectIsUser/${openid}`,
          complete: res => {},
          success: result => {
            let form = _this.form;
            form.openId = openid;
            form.userId = result.data.dataMap.data.id;

            _this.setData({
              form
            });
          }
        });
      }
    }

  }
};
</script>
<style>
/* pages/ucenter/skill/skill.wxss */
page {
    background: #efeff5;
}

.skill-item {
    background: #ffffff;
    width: 96%;
    height: 100rpx;
    line-height: 100rpx;
    margin: 2%;
    padding: 0rpx 20rpx;
}

.skill-item text {
    float: left;
    height: 100rpx;
    width: 25%;
}

.skill-item input {
    float: left;
    height: 100rpx;
    width: 75%;
}

.skill-foot {
    position: absolute;
    display: flex;
    bottom: 10rpx;
    width: 100%;
}

.skill-foot button {
    padding: 10rpx 20rpx;
    margin: 10rpx 10rpx;
    flex: 1;
}
</style>